<!--
 @description
 @fileName EditPerson.vue
 @author zengqiongying
 @created 2023/04/28 16:57:41
-->
<template>
  <Popup v-model="popShow" position="bottom" :title="title" :show-cancel-button="false" @confirm="onSubmit">
    <div>
      <Cell title="联系人姓名" :right="false" :required="required" custom isColumn>
        <qmp-field v-model="formData.name" placeholder="输入姓名" class="ctm-text-field" clear :maxlength="10" />
      </Cell>

      <Cell title="联系人电话" :right="false" :required="required" custom isColumn>
        <qmp-field
          v-model="formData.tel"
          type="tel"
          placeholder="输入电话"
          class="ctm-text-field"
          clear
          :maxlength="20"
        />
      </Cell>

      <Cell title="联系人手机" :right="false" :required="required" custom isColumn>
        <qmp-field
          v-model="formData.phone"
          type="tel"
          placeholder="输入手机号码"
          class="ctm-text-field"
          clear
          :maxlength="11"
        />
      </Cell>
    </div>
  </Popup>
</template>

<script lang="ts">
  import Popup from '@/components/Popup/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import { reactive, toRefs, computed, watch, getCurrentInstance, defineComponent } from 'vue'
  export default defineComponent({
    name: 'PopCustomerAddressEditPerson',
    components: { Popup, Cell },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      required: {
        type: Boolean,
        default: false
      },
      modelValue: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const { proxy }: any = getCurrentInstance()
      const datas = reactive({
        formData: {
          name: '',
          tel: '',
          phone: ''
        }
      })
      const popShow = computed({
        set(val) {
          emit('update:show', val)
        },
        get() {
          return props.show
        }
      })
      watch(
        () => props.modelValue,
        (d) => {
          datas.formData = {
            name: d?.name || '',
            tel: d?.tel || '',
            phone: d?.phone || ''
          }
        },
        {
          immediate: true
        }
      )
      const onSubmit = () => {
        const data = datas.formData
        const name = data.name.trim()
        const none = ['', null, undefined]
        if (props.required) {
          if (none.includes(name) || none.includes(data.tel) || none.includes(data.phone)) {
            proxy.$toast('请输入必填内容')
            return
          }
        }
        if (data.tel) {
          const regTel = /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/
          if (!regTel.test(data.tel)) {
            proxy.$toast('请输入有效电话号码')
            return
          }
        }

        if (data.phone) {
          const reg = /^1[3456789]\d{9}$/
          if (!reg.test(data.phone)) {
            proxy.$toast('请输入有效手机号码')
            return
          }
        }
        emit('update:modelValue', data)
        emit('success', data)
        popShow.value = false
      }
      return {
        ...toRefs(datas),
        popShow,
        onSubmit
      }
    }
  })
</script>
<style lang="less" scoped></style>
